<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            *{
                  margin: 0;
                  padding: 0;
            }
            body,html{
                  height: 100%;
                  background: #f4f4f4;
                  font: 14px/1.5 "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
            }
            .container{
                  width: 1150px;
                  margin: 20px auto;
            }
            .box{
                  border-radius: 4px;
                  overflow: hidden;
                  float: left;
                  margin-right: 20px;
                  background: #fff;
                  position: relative;
                  padding-bottom: 5px;
            }
            .box img{
                  width: 210px;
                  height: 118px;
            }
            .title{
                  padding: 0 10px;
                  margin-top: 4px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  width: 190px;
            }
      </style>
</head>
<body>
      
      <button id="change">换一换</button>
      <div class="container">
            
      </div>
      <script>
            // function callback(data){
            //       console.log(data);
            // }
            // 如果动态生一个script标签插入到页面之中，页面会立即发起一个http请求;

            // var script = document.createElement("script");
            // script.src = "https://api.gogoup.com/p1/data/recommend?type=0&pageNo=3&pageSize=5&fromId=546&jsonpcallback=callback&_=" + Date.now();
            // console.log(script);

            // 结论 : 如果需要控制 jsonp请求的发送时机可以动态创建script,什么时候这个标签放入页面，什么时候浏览器帮我们发起请求;
            
            // 1. 点击换一换，发起一个http请求 。 jsonp; 
            // 2. 获取到的数据进行渲染拼接;
            
            // 猜出接口的参数; 
            var pageNo = 2;
            var formId = 379;

            document.querySelector("#change").onclick = function(){
                  var script = document.createElement("script")
                  script.src = "https://api.gogoup.com/p1/data/recommend?type=0&pageNo=" + pageNo + "&pageSize=5&fromId="+ formId +"&jsonpcallback=callback&_=" + Date.now();
                  https://api.gogoup.com/p1/data/recommend?type=0&pageNo=11&pageSize=5&fromId=307&jsonpcallback=jQuery1102004997906321107659_1594652451321&_=1594652451332
                  document.body.appendChild( script );
            }
            function callback( data ){
                  // 渲染页面;
                  console.log(data);
                  // let { datas } = data;
                  // 提取需要拼接的数据;
                  var datas = data.datas;
                  // 字符串拼接;
                  var html = "";
                  for(var i = 0 ; i < datas.length ; i ++){
                        html +=  '<div class="box">' +
                                    '<img src="'+ datas[i].image +'" alt="">' +
                                    '<div class="title">' + datas[i].name + '</div>'+
                              '</div>'
                  }
                  document.querySelector(".container").innerHTML = html;
                  pageNo ++;
                  formId = datas[datas.length - 1].courseId;
            }
      </script>
</body>
</html>